<template>
    <div>
        <!-- 表一 -->
        <el-row class="DCJTitle">
            <span></span> 月浆量详情表
        </el-row>
        <el-row>
            <el-card>
                <el-table :data="XJLInfoData" stripe border class="company-table"  v-loading="loading">
                     <el-table-column v-for="(item,index) in XJLInfoData[0]" :label="parseInt(item.collMonth)+'月'" :key="index" align="center" >
                        <template slot-scope="scope">
                            <span v-if="item.collCount !=0">{{item.collCount}}</span>
                            <span v-else-if="item.collCount == 0">--</span>
                        </template>
                     </el-table-column>
                </el-table>
            </el-card>
        </el-row>
        <!-- 表二 -->
        <el-row class="DCJTitle" style="margin-top:10px;">
            <span></span> 轮次浆量详情表
        </el-row>
        <el-row>
            <el-card>
                <el-table :data="LCJLInfoData" stripe border class="company-table" :height="this.$store.state.clientHeight-410+'px'" v-loading="loading">
                    <el-table-column type="index" label="轮次"  align="center"></el-table-column>
                    <el-table-column prop="roundCountDay.day1.collCount" label="第一天"  align="center">
                        <template slot-scope="scope">
                            <el-popover trigger="hover" placement="top" v-if="scope.row.roundCountDay.day1">
                                <span>{{ scope.row.roundCountDay.day1.allDate }}</span>
                                <span style="padding-left:10px;">{{scope.row.roundCountDay.day1.allDate | isDay}}</span>
                                <div slot="reference" class="name-wrapper">
                                    <el-tag class="dayFirst" size="mini" type="warning" effect="dark" v-show="firstDay(scope.row.roundCountDay.day1.allDate)">{{firstDay(scope.row.roundCountDay.day1.allDate)}}月</el-tag>
                                    <el-button type="text" size="medium">{{ scope.row.roundCountDay.day1.collCount}}</el-button>
                                </div>
                            </el-popover>
                            <div v-else>--</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="roundCountDay.day2.collCount" label="第二天"  align="center">
                        <template slot-scope="scope">
                            <el-popover trigger="hover" placement="top" v-if="scope.row.roundCountDay.day2">
                                <span>{{ scope.row.roundCountDay.day2.allDate }}</span>
                                <span style="padding-left:10px;">{{scope.row.roundCountDay.day2.allDate | isDay}}</span>
                                <div slot="reference" class="name-wrapper">
                                    <el-tag class="dayFirst" size="mini" type="warning" effect="dark" v-show="firstDay(scope.row.roundCountDay.day2.allDate)">{{firstDay(scope.row.roundCountDay.day2.allDate)}}月</el-tag>
                                    <el-button type="text" size="medium">{{ scope.row.roundCountDay.day2.collCount }}</el-button>
                                </div>
                            </el-popover>
                            <div v-else>--</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="roundCountDay.day3.collCount" label="第三天"  align="center">
                        <template slot-scope="scope">
                            <el-popover trigger="hover" placement="top" v-if="scope.row.roundCountDay.day3">
                                <span>{{ scope.row.roundCountDay.day3.allDate }}</span>
                                <span style="padding-left:10px;">{{scope.row.roundCountDay.day3.allDate | isDay}}</span>
                                <div slot="reference" class="name-wrapper">
                                    <el-tag class="dayFirst" size="mini" type="warning" effect="dark" v-show="firstDay(scope.row.roundCountDay.day3.allDate)">{{firstDay(scope.row.roundCountDay.day3.allDate)}}月</el-tag>
                                    <el-button type="text" size="medium">{{ scope.row.roundCountDay.day3.collCount }}</el-button>
                                </div>
                            </el-popover>
                            <div v-else>--</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="roundCountDay.day4.collCount" label="第四天"  align="center">
                        <template slot-scope="scope">
                            <el-popover trigger="hover" placement="top" v-if="scope.row.roundCountDay.day4">
                                <span>{{ scope.row.roundCountDay.day4.allDate }}</span>
                                <span style="padding-left:10px;">{{scope.row.roundCountDay.day4.allDate | isDay}}</span>
                                <div slot="reference" class="name-wrapper">
                                    <el-tag class="dayFirst" size="mini" type="warning" effect="dark" v-show="firstDay(scope.row.roundCountDay.day4.allDate)">{{firstDay(scope.row.roundCountDay.day4.allDate)}}月</el-tag>
                                    <el-button type="text" size="medium">{{ scope.row.roundCountDay.day4.collCount }}</el-button>
                                </div>
                            </el-popover>
                            <div v-else>--</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="roundCountDay.day5.collCount" label="第五天"  align="center">
                        <template slot-scope="scope">
                            <el-popover trigger="hover" placement="top" v-if="scope.row.roundCountDay.day5">
                                <span>{{ scope.row.roundCountDay.day5.allDate }}</span>
                                <span style="padding-left:10px;">{{scope.row.roundCountDay.day5.allDate | isDay}}</span>
                                <div slot="reference" class="name-wrapper">
                                    <el-tag class="dayFirst" size="mini" type="warning" effect="dark" v-show="firstDay(scope.row.roundCountDay.day5.allDate)">{{firstDay(scope.row.roundCountDay.day5.allDate)}}月</el-tag>
                                    <el-button type="text" size="medium">{{ scope.row.roundCountDay.day5.collCount }}</el-button>
                                </div>
                            </el-popover>
                            <div v-else>--</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="roundCountDay.day6.collCount" label="第六天"  align="center">
                        <template slot-scope="scope">
                            <el-popover trigger="hover" placement="top" v-if="scope.row.roundCountDay.day5">
                                <span>{{ scope.row.roundCountDay.day6.allDate }}</span>
                                <span style="padding-left:10px;">{{scope.row.roundCountDay.day6.allDate | isDay}}</span>
                                <div slot="reference" class="name-wrapper">
                                    <el-tag class="dayFirst" size="mini" type="warning" effect="dark" v-show="firstDay(scope.row.roundCountDay.day6.allDate)">{{firstDay(scope.row.roundCountDay.day6.allDate)}}月</el-tag>
                                    <el-button type="text" size="medium">{{ scope.row.roundCountDay.day6.collCount }}</el-button>
                                </div>
                            </el-popover>
                            <div v-else>--</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="roundCountDay.day7.collCount" label="第七天"  align="center">
                        <template slot-scope="scope">
                            <el-popover trigger="hover" placement="top" v-if="scope.row.roundCountDay.day7">
                                <span>{{ scope.row.roundCountDay.day7.allDate }}</span>
                                <span style="padding-left:10px;">{{scope.row.roundCountDay.day7.allDate | isDay}}</span>
                                <div slot="reference" class="name-wrapper">
                                    <el-tag class="dayFirst" size="mini" type="warning" effect="dark" v-show="firstDay(scope.row.roundCountDay.day7.allDate)">{{firstDay(scope.row.roundCountDay.day7.allDate)}}月</el-tag>
                                    <el-button type="text" size="medium">{{ scope.row.roundCountDay.day7.collCount }}</el-button>
                                </div>
                            </el-popover>
                            <div v-else>--</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="roundCountDay.day8.collCount" label="第八天"  align="center">
                        <template slot-scope="scope">
                            <el-popover trigger="hover" placement="top" v-if="scope.row.roundCountDay.day8">
                                <span>{{ scope.row.roundCountDay.day8.allDate }}</span>
                                <span style="padding-left:10px;">{{scope.row.roundCountDay.day8.allDate | isDay}}</span>
                                <div slot="reference" class="name-wrapper">
                                    <el-tag class="dayFirst" size="mini" type="warning" effect="dark" v-show="firstDay(scope.row.roundCountDay.day8.allDate)">{{firstDay(scope.row.roundCountDay.day8.allDate)}}月</el-tag>
                                    <el-button type="text" size="medium">{{ scope.row.roundCountDay.day8.collCount }}</el-button>
                                </div>
                            </el-popover>
                            <div v-else>--</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="roundCountDay.day9.collCount" label="第九天"  align="center">
                        <template slot-scope="scope">
                            <el-popover trigger="hover" placement="top" v-if="scope.row.roundCountDay.day9">
                                <span>{{ scope.row.roundCountDay.day9.allDate }}</span>
                                <span style="padding-left:10px;">{{scope.row.roundCountDay.day9.allDate | isDay}}</span>
                                <div slot="reference" class="name-wrapper">
                                    <el-tag class="dayFirst" size="mini" type="warning" effect="dark" v-show="firstDay(scope.row.roundCountDay.day9.allDate)">{{firstDay(scope.row.roundCountDay.day9.allDate)}}月</el-tag>
                                    <el-button type="text" size="medium">{{ scope.row.roundCountDay.day9.collCount }}</el-button>
                                </div>
                            </el-popover>
                            <div v-else>--</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="roundCountDay.day10.collCount" label="第十天"  align="center">
                        <template slot-scope="scope">
                            <el-popover trigger="hover" placement="top" v-if="scope.row.roundCountDay.day10">
                                <span>{{ scope.row.roundCountDay.day10.allDate }}</span>
                                <span style="padding-left:10px;">{{scope.row.roundCountDay.day10.allDate | isDay}}</span>
                                <div slot="reference" class="name-wrapper">
                                    <el-tag class="dayFirst" size="mini" type="warning" effect="dark" v-show="firstDay(scope.row.roundCountDay.day10.allDate)">{{firstDay(scope.row.roundCountDay.day10.allDate)}}月</el-tag>
                                    <el-button type="text" size="medium">{{ scope.row.roundCountDay.day10.collCount }}</el-button>
                                </div>
                            </el-popover>
                            <div v-else>--</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="roundCountDay.day11.collCount" label="第十一天"  align="center">
                        <template slot-scope="scope">
                            <el-popover trigger="hover" placement="top" v-if="scope.row.roundCountDay.day11">
                                <span>{{ scope.row.roundCountDay.day11.allDate }}</span>
                                <span style="padding-left:10px;">{{scope.row.roundCountDay.day11.allDate | isDay}}</span>
                                <div slot="reference" class="name-wrapper">
                                    <el-tag class="dayFirst" size="mini" type="warning" effect="dark" v-show="firstDay(scope.row.roundCountDay.day11.allDate)">{{firstDay(scope.row.roundCountDay.day11.allDate)}}月</el-tag>
                                    <el-button type="text" size="medium">{{ scope.row.roundCountDay.day11.collCount }}</el-button>
                                </div>
                            </el-popover>
                            <div v-else>--</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="roundCountDay.day12.collCount" label="第十二天"  align="center">
                        <template slot-scope="scope">
                            <el-popover trigger="hover" placement="top" v-if="scope.row.roundCountDay.day12">
                                <span>{{ scope.row.roundCountDay.day12.allDate }}</span>
                                <span style="padding-left:10px;">{{scope.row.roundCountDay.day12.allDate | isDay}}</span>
                                <div slot="reference" class="name-wrapper">
                                    <el-tag class="dayFirst" size="mini" type="warning" effect="dark" v-show="firstDay(scope.row.roundCountDay.day12.allDate)">{{firstDay(scope.row.roundCountDay.day12.allDate)}}月</el-tag>
                                    <el-button type="text" size="medium" >{{ scope.row.roundCountDay.day12.collCount }}</el-button>
                                </div>
                            </el-popover>
                            <div v-else>--</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="roundCountDay.day13.collCount" label="第十三天"  align="center">
                        <template slot-scope="scope">
                            <el-popover trigger="hover" placement="top" v-if="scope.row.roundCountDay.day13">
                                <span>{{ scope.row.roundCountDay.day13.allDate }}</span>
                                <span style="padding-left:10px;">{{scope.row.roundCountDay.day13.allDate | isDay}}</span>
                                <div slot="reference" class="name-wrapper">
                                    <el-tag class="dayFirst" size="mini" type="warning" effect="dark" v-show="firstDay(scope.row.roundCountDay.day13.allDate)">{{firstDay(scope.row.roundCountDay.day13.allDate)}}月</el-tag>
                                    <el-button type="text" size="medium">{{ scope.row.roundCountDay.day13.collCount }}</el-button>
                                </div>
                            </el-popover>
                            <div v-else>--</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="roundCountDay.day14.collCount" label="第十四天"  align="center">
                        <template slot-scope="scope">
                            <el-popover trigger="hover" placement="top" v-if="scope.row.roundCountDay.day14">
                                <span>{{ scope.row.roundCountDay.day14.allDate }}</span>
                                <span style="padding-left:10px;">{{scope.row.roundCountDay.day14.allDate | isDay}}</span>
                                <div slot="reference" class="name-wrapper">
                                    <el-tag class="dayFirst" size="mini" type="warning" effect="dark" v-show="firstDay(scope.row.roundCountDay.day14.allDate)">{{firstDay(scope.row.roundCountDay.day14.allDate)}}月</el-tag>
                                    <el-button type="text" size="medium">{{ scope.row.roundCountDay.day14.collCount }}</el-button>
                                </div>
                            </el-popover>
                            <div v-else>--</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="当轮总浆量"  align="center">
                        <template slot-scope="scope">
                            <div class="c_red">
                                {{scope.row.countRoundMonth}}
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
        </el-row>
    </div>
</template>
<script>
import analysisHttp from "plugins/axios/analysisHttp.js";
export default {
    data() {
        return {
            loading:true, //加载图标
            XJLInfoData:[], //月浆量详情表数据
            LCJLInfoData:[], //轮次浆量详情表
        };
    },
    mounted() {
        let that = this
        that.getByYear()
    },
    filters:{
        isDay(day){  //数字转中文数字
            let that = this, _d = new Date(day).getDay(),val='',chnNumChar = ["零","一","二","三","四","五","六","七","八","九"]
            ,chnUnitSection = ["","万","亿","万亿","亿亿"],chnUnitChar = ["","十","百","千"];
            function SectionToChinese(section){
                let strIns = '', chnStr = '',unitPos = 0,zero = true;
                while(section > 0){
                    var v = section % 10;
                    if(v === 0){
                        if(!zero){
                            zero = true;
                            chnStr = chnNumChar[v] + chnStr;
                        }
                    }else{
                        zero = false;
                        strIns = chnNumChar[v];
                        strIns += chnUnitChar[unitPos];
                        chnStr = strIns + chnStr;
                    }
                    unitPos++;
                    section = Math.floor(section / 10);
                }
                return chnStr;
            }

            function NumberToChinese(num){  
               let unitPos = 0,strIns = '', chnStr = '', needZero = false;  
                if(num === 0){  
                    return chnNumChar[0];  
                }  
                
                while(num > 0){  
                    let section = num % 10000;  
                    if(needZero){  
                    chnStr = chnNumChar[0] + chnStr;  
                    }  
                    strIns = SectionToChinese(section);  
                    strIns += (section !== 0) ? chnUnitSection[unitPos] : chnUnitSection[0];  
                    chnStr = strIns + chnStr;  
                    needZero = (section < 1000) && (section > 0);  
                    num = Math.floor(num / 10000);  
                    unitPos++;  
                }  
                
                return chnStr;  
            }
            if(_d == 0){
                val = '周日'
            }else{
                val ='周'+ NumberToChinese(_d)
            }
            return val
        },  
    },
    methods: {
        toArr(BOJ) {
            let arr = [];
            for (let i in BOJ) {
                arr.push(BOJ[i]); //属性
            }
            return arr;
        },
        siUn(val){
            if(val == 'undefined'){
                return '--'
            }else{
                return val
            }
        },
        firstDay(day){ //是否为月份的第一天
            let arr = day.split('-')       
            if(arr[2] == '01'){
                return parseInt(arr[1])
            }else{
                return false
            }  
        },
        getDay(time){
           return new Date(time).getDay() == 0 ? '休息日' : true
        },
        getByYear(year) {
            let that = this 
            analysisHttp
                .selectCollStatisticsByYear({ year: "2018" })
                .then(res => {
                    that.loading = false
                    if(res.statusCode == 200){
                        let monthCollCount = res.content.monthCollCount //月浆量详情表
                        let allRoundData = res.content.allRoundData //轮次浆量详情表
                         that.XJLInfoData.push(monthCollCount)
                         that.LCJLInfoData = that.toArr(allRoundData)
                         
                    }
                   
                });
        },
    }
};
</script>
<style lang="scss" scoped>
.DCJTitle {
    & {
        height: 30px;
        line-height: 30px;
        margin-bottom: 10px;
        font-size: 16px;
    }
    & span {
        display: inline-block;
        width: 5px;
        height: 100%;
        vertical-align: bottom;
        background-color: #89dadc;
    }
}
.c_red{color: #e68e05;font-weight: 600;}
.name-wrapper{
    & .dayFirst{position: absolute;left: 1px;top: 1px;font-size: 10px !important;padding: 0 2px;}
}
// .btn{font-size: 14px}
</style>

